<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>

<link rel="stylesheet" th:href="@{/static/js/plugins/zTree_v3/zTreeStyle.css}" type="text/css">
<script type="text/javascript" th:src="@{/static/js/plugins/zTree_v3/jquery.ztree.core.js}"></script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content" style="width: 98%;">

            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    $(function(){
        // 文档地址:http://www.treejs.cn/v3/demo.php#_108
        var setting = {
            async: {
                enable: true,//启用异步方式加载树结构
                url:"/dict/findZnodes",//指定请求地址，获取树节点数据
                type:"get",//
                autoParam:["id"],//传递树的节点的一些属性值给服务器，这些属性名称固定
                // otherParam:{"otherParam":"zTreeAsyncTest"},
                dataFilter: filter
            }
        };
        //result表示controller方法返回的结果
        function filter(treeId, parentNode, result) {//对服务器返回数据进行锅炉
            childNodes = result.data;
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');//将多个.n都替换为.
            }
            return childNodes;
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting);
        });
    });
</script>
</body>
</html>